require(['config'], function() {
  require(['jquery', 'swiper', 'template', 'loadH','loadF2','loadM', 'jquery.cookie'], function($, Swiper, template) {
    /* 创建 Swiper 对象实例，实现轮播图效果 */
    

    /* 查询推荐商品数据，并渲染 */
    $.getJSON('http://www.xiongmaoyouxuan.com/api/tab/1', resData => {
      // console.log('获取到数据：', resData)
      // 获取返回数据中表示推荐商品的数组
      const _products = resData.data.items.list
      // console.log('推荐商品：', _products)
      // 根据推荐商品的数组来渲染模板
      const html = template('hot-template', {products: _products})
      // console.log('渲染后：', html)
      // 添加到 DOM 树中
      $('.hot').append(html)
      console.log(_products)
    })

    $.getJSON('/mock/hot.json', resData => {
      const _products = resData.data.list
      const html = template('swiper-template', {products: _products})
      $('.swiper-slide').append(html)
    })
    new Swiper('.swiper-container', {
      loop: true, // 循环模式选项
      autoplay: false, // 自动轮播切换
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })

    /* 添加购物车：为按钮绑定点击事件--利用事件委派 */
    $('.hot').on('click', '.add-to-cart', e => {
      // 获取当前按钮所在的 li 节点
      const $li = $(e.target).parents('.hot-item')
      // 在 li 节点中查找后代节点，构建商品对象
      // 构建当前选购商品的对象
      const curr = {
        id: $li.data('id'), // 获取在 li 节点上自定义 id 属性(data-id)的值
        title: $li.children('.title').html(),
        price: $li.find('.price').text(),
        image: $li.find('.image').attr('src'),
        amount: 1
      }
      // 配置，保存或读取cookie时，自动实现JSON转换
      $.cookie.json = true
      // 从 cookie 中读取已有保存的购物车数组数据
      const cart = $.cookie('cart') || []
      // 判断购物车数组中是否存在当前选购的商品，
      // 如果存在，则修改数量即可。不存在则添加到数组中
      const index = cart.findIndex(prod => prod.id === curr.id)
      if (index !== -1) { // 存在已选购的当前商品
        cart[index].amount += 1
      } else { // 不存在当前选购的商品，则添加到数组中
        // 将当前选购商品保存到 cart 数组中
        cart.push(curr)
      }
      // 将购物车数组保存到 cookie 中
      $.cookie('cart', cart, {expires: 70})

      console.log($.cookie('cart'))
    })

    $('.hot').on('click', '.image', e => {
      // 获取当前按钮所在的 li 节点
      const $li = $(e.target).parents('.hot-item')
      // 在 li 节点中查找后代节点，构建商品对象
      // 构建当前选购商品的对象
      const curr = {
        id: $li.data('id'), // 获取在 li 节点上自定义 id 属性(data-id)的值
        title: $li.children('.title').html(),
        price: $li.find('.price').text(),
        originprice: $li.find('.originprice').text(),
        image: $li.find('.image').attr('src'),
        amount: 1
      }
      // 配置，保存或读取cookie时，自动实现JSON转换
      $.cookie.json = true
      
      // 将购物车数组保存到 cookie 中
      $.cookie('detail', curr, {expires: 70})
      
      console.log($.cookie('detail'))

      window.location.href='html/detail.html'
      
    })


    //添加购物车抛物线效果
    var $ball = $('#ball')[0];
    $('.hot').on('click', '.add-to-cart', evt => {
        $ball.style.display='block';
        console.log(evt.clientX,evt.clientY)
        $ball.style.top = evt.clientY+'px';
        $ball.style.left = evt.clientX+'px';
        $ball.style.transition = 'left 0s, top 0s';
        setTimeout(()=>{
            $ball.style.top = '90%';
            $ball.style.left = '90%';
            $ball.style.transition = 'left 1s linear, top 1s ease-in';
        }, 0)
        setTimeout(()=>{
          $ball.style.display='none';
        },1000)
    })
    
      
    
        
    
  })
})
